<template>
  <div>
    <el-form :inline="true" style="text-align: left" ref="query" :model="query">
      <el-row class="query">
        <el-form-item label="关键字:">
          <el-input
            placeholder="姓名,身份证号"
            v-model="query.keyword"
          ></el-input>
        </el-form-item>
        <el-form-item label="应还日:">
          <el-input
            v-model="query.answerDay"
            oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
          ></el-input>
        </el-form-item>
        <el-form-item label="扣款状态:">
          <el-select v-model="query.withHold" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-button type="danger" @click="emptyData"> 清空</el-button>
        <el-button type="primary" @click="determineButton"> 搜索</el-button>
        <!-- <el-button size="small" type="primary" @click="deductMoney"
          >一键扣款</el-button
        > -->

        <!-- <el-button
              icon="el-icon-circle-plus-outline"
              size="small"
              type="primary"
              v-no-more-click
              >批量发起扣款</el-button
            >
            <el-button
              icon="el-icon-circle-plus-outline"
              size="small"
              type="primary"
              v-no-more-click
              >批量生成提成与业绩</el-button
            >
          </el-form-item>
        </el-col> -->
      </el-row>
    </el-form>
    <div style="text-align: left">
      <el-button
        size="small"
        type="primary"
        @click="accounting"
        style="margin-bottom: 10px"
      >核算
      </el-button
      >
      <el-button
        icon="el-icon-circle-plus-outline"
        @click="orderExport"
        size="small"
        type="primary"
        v-no-more-click
        style="margin-bottom: 10px"
        v-if="userInfoExport"
      >导出
      </el-button
      >
      <el-popconfirm
        title="是否确认扣款?"
        @onConfirm="deductMoney"
        style="margin-left: 10px; margin-bottom: 10px"
      >
        <el-button slot="reference" size="small" type="primary"
        >一键扣款
        </el-button
        >
      </el-popconfirm>
      <el-popconfirm
        title="是否确认扣款?"
        @onConfirm="batchDeduct(0)"
        style="margin-left: 10px; margin-bottom: 10px"
      >
        <el-button slot="reference" size="small" type="primary"
        >一键扣款银联
        </el-button
        >
      </el-popconfirm>
      <el-popconfirm
        title="是否确认扣款?"
        @onConfirm="batchDeduct(1)"
        style="margin-left: 10px; margin-bottom: 10px"
      >
        <el-button slot="reference" size="small" type="primary"
        >一键扣款银盛
        </el-button
        >
      </el-popconfirm>
    </div>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="姓名" :show-overflow-tooltip="true" />
      <el-table-column
        prop="idCard"
        label="身份证号"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="contractNumber"
        label="执行合同号"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="belongName"
        label="归属经纪人"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="channelName"
        label="归属渠道客服"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="answerAmount"
        label="应还总额"
        :show-overflow-tooltip="true"
      />
      <!-- <el-table-column
        prop="nameq"
        label="应还本金"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="nameq"
        label="应还手续费"
        :show-overflow-tooltip="true"
      /> -->
      <el-table-column
        prop="answerMonth"
        label="应还月"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="answerDay"
        label="应还日"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="actualMonth"
        label="实还月"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="actualDay"
        label="实还日"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="overdueStatus"
        label="是否逾期"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="withHoldStatus"
        label="扣款状态"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="代扣通道"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.withHoldType == 0">银联</span>
          <span v-if="scope.row.withHoldType == 1">银盛</span>
          <span v-if="scope.row.withHold
==1 && scope.row.withHoldType == null">线下</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="withHoldCode"
        label="银联扣款码"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="yseOutTradeNo"
        label="银盛扣款码"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="withHoldAmount"
        label="实扣总额"
        :show-overflow-tooltip="true"
      />
      <!-- <el-table-column
        prop="nameq"
        label="实还本金"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="nameq"
        label="实还手续费"
        :show-overflow-tooltip="true"
      /> -->
      <el-table-column
        prop="applyPerson"
        label="申请扣款人"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="actualTime"
        label="实际扣款时间"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="commissionStatus"
        label="是否计算提成"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="achievementStatus"
        label="是否计算业绩"
        :show-overflow-tooltip="true"
      />
      <el-table-column prop="note" label="备注" :show-overflow-tooltip="true" />
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-popconfirm
            title="确定发起扣款吗？"
            @onConfirm="deductionFun(scope.row)"
          >
            <el-button
              slot="reference"
              type="text"
              size="small"
              :class="scope.row.withHold == 1 ? 'native' : 'active'"
              v-no-more-click
              :disabled="scope.row.withHold == 1"
            >发起扣款
            </el-button
            >
          </el-popconfirm>
          <el-button
            slot="reference"
            type="text"
            size="small"
            :class="scope.row.withHold == 1 ? 'native' : 'active'"
            v-no-more-click
            :disabled="scope.row.withHold == 1"
            @click="offlineFun(scope.row)"
          >线下代扣
          </el-button
          >
          <el-button
            slot="reference"
            type="text"
            size="small"
            style="color: #ffa42f"
            v-no-more-click
            @click="rexponseStust(scope.row)"
          >响应状态
          </el-button
          >
          <el-button
            slot="reference"
            type="text"
            size="small"
            style="color: #555555"
            v-no-more-click
            @click="payQueryFun(scope.row)"
          >查询
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <p class="content">
      小计，总共{{ perInfo.stagesNum || 0 }}期，总应还￥{{
        perInfo.stagesAmount || 0
      }}。已结清{{ perInfo.completedNum || 0 }}期，已还总额￥{{
        perInfo.completedAmount || 0
      }}（银联￥{{ perInfo.installmentUnion + perInfo.unionAmount }},银盛￥{{ perInfo.installmentYse + perInfo.yseAmount
      }}），剩余待还￥{{ perInfo.overAmount || 0
      }}。累计逾期{{
        perInfo.overdueNum || 0
      }}次。
    </p>
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="响应状态"
      :visible.sync="dialogVisible"
      :modal-append-to-body="false"
      append-to-body
      width="40%"
    >
      <el-form
        :inline="true"
        :model="responseData"
        label-width="120px"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="同步响应">
              <el-input v-model="responseData.respCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="同步响应描述">
              <el-input v-model="responseData.respDescribe"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="异步响应">
              <el-input v-model="responseData.asyCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="异步响应描述">
              <el-input v-model="responseData.asyDescribe"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 查询弹框 -->
    <el-dialog
      title="查询结果"
      :visible.sync="dialogVisiblepay"
      :modal-append-to-body="false"
      append-to-body
      width="40%"
    >
      <el-form
        :inline="true"
        :model="payQueryData"
        label-width="150px"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="响应码" prop="respCode">
              <el-input v-model="payQueryData.respCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付状态" prop="message">
              <el-input v-model="payQueryData.message"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 线下扣款 -->
    <el-dialog
      title="线下扣款"
      :visible.sync="offlineDialog"
      :modal-append-to-body="false"
      append-to-body
      width="25%"
      :before-close="closeOfflineDia"
    >
      <el-form
        :inline="true"
        :model="offlineForm"
        ref="offlineForm"
        :rules="rules"
        label-width="120px"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="还款时间" prop="date">
              <el-date-picker
                v-model="offlineForm.date"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="授权密码" prop="authPass">
              <el-input
                v-model="offlineForm.authPass"
                style="width: 220px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="还款金额" prop="offlineAmount">
              <el-input
                v-model="offlineForm.offlineAmount"
                style="width: 220px"
              ></el-input>
              <span> 元</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="note">
              <el-input
                v-model="offlineForm.note"
                type="textarea"
                :rows="2"
                maxlength="50"
                style="width: 220px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="offlineSubim">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPageMonthInfo,
  postDeductPerson,
  getMonthInfoTotal,
  getPayQuery,
  getChinaPayCode,
  putOffline,
  installmentAccounting,
  deductTask,
  batchDeduct
} from "@/assets/js/api";
import { expotOut, checkPermiss } from "../../assets/js/utlis";

export default {
  name: "Monthly",
  props: {
    executeTime: {
      type: String
    }
    // golbalPermissions: {
    //   type: Array,
    // },
  },
  data() {
    return {
      options: [
        {
          value: 1,
          label: "扣款成功"
        },
        {
          value: 0,
          label: "扣款失败"
        }
      ],
      query: {
        withHold: null, //扣款状态!
        pageSize: 10,
        pageNo: 1,
        executeTime: null,
        answerDay: null, //应还日!
        keyword: null //关键字!
      },
      answerMonths: null, //分期月份!
      perInfo: {},
      total: 10,
      pages: 0,
      currentPage: 1,
      tableData: [],
      responseData: {
        respCode: "",
        asyCode: "",
        asyDescribe: "",
        respDescribe: ""
      },
      dialogVisible: false,
      payQueryData: {},
      dialogVisiblepay: false,
      offlineDialog: false,
      golbalPermissions: [],
      offlineForm: {
        note: "",
        authPass: "",
        offlineAmount:'',
        date: "",
        id: ""
      },
      rules: {
        note: [
          { min: 0, max: 50, message: "不可超过50个字符", trigger: "blur" }
        ],
        authPass: [
          { required: true, message: "请输入授权密码", trigger: "blur" }
        ],
        offlineAmount: [
          { required: true, message: "请输入还款金额", trigger: "blur" }
        ],
        date: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.query.executeTime = this.executeTime;
    this.gitList();
    this.getMonthInfo();
  },
  computed: {
    userInfoExport: function() {
      return checkPermiss(
        "business:sign:exportMonthInfo",
        this.golbalPermissions
      );
    }
  },
  methods: {
    //一键扣款银联/银盛
    batchDeduct(type) {
      batchDeduct({ channel: type }).then((res) => {
        if (res.code == 200) {
          this.$message.success("扣款成功!");
        } else {
          this.$message.error("扣款失败!");
        }
      });
    },

    // 一件扣款!
    deductMoney() {
      deductTask().then((res) => {
        if (res.code == 200) {
          this.$message.success("扣款成功!");
        } else {
          this.$message.error("扣款失败!");
        }
      });
    },
    //筛选框清空按钮!
    emptyData() {
      // this.query.executeTime = "";
      this.query.answerDay = "";
      this.query.keyword = "";
      this.query.withHold = null;
      this.gitList();
    },
    // 搜索按钮!
    determineButton() {
      this.gitList();
    },
    //核算按钮!
    accounting() {
      var currentMonth = this.answerMonths;
      installmentAccounting(currentMonth).then((res) => {
        var msg = res.message;
        if (res.code == 200) {
          this.$message({ message: msg, type: "success" });
        } else {
          this.$message({ message: msg, type: "error" });
        }
      });
    },
    // 获取数据
    gitList() {
      getPageMonthInfo(this.query).then((res) => {
        if (res.code == 200) {
          this.answerMonths = this.executeTime;

          this.tableData = res.data.records;
          this.currentPage = res.data.current;
          this.total = res.data.total;
          this.pages = res.data.pages;
        }
      });
    },
    // 明细统计
    getMonthInfo() {
      getMonthInfoTotal(this.executeTime).then((res) => {
        if (res.code == 200) {
          this.perInfo = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 响应状态
    rexponseStust(row) {
      getChinaPayCode(row.id).then((res) => {
        if (res.code == 200) {
          if (res.data != null) {
            this.responseData = res.data;
            this.dialogVisible = true;
          } else {
            this.$message.error("暂无数据");
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 查询按钮
    payQueryFun(row) {
      getPayQuery(row.id).then((res) => {
        if (res.code == 200) {
          if (res.data != null) {
            this.dialogVisiblepay = true;
            this.payQueryData = res.data;
          } else {
            this.$message.error("暂无数据");
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //发起扣款
    deductionFun(row) {
      let form = {};
      form.id = row.id;
      form.type = "m";
      postDeductPerson(form).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.gitList();
        } else {
          this.$message.error(res.message);
          this.gitList();
        }
      });
    },
    // 线下代扣
    offlineFun(row) {
      this.offlineForm.id = row.id;
      this.offlineDialog = true;
    },
    // 线下代扣提交
    offlineSubim() {
      this.$refs.offlineForm.validate((valid) => {
        if (valid) {
          putOffline(this.offlineForm).then((res) => {
            if (res.code == 200) {
              this.offlineDialog = false;
              this.$refs.offlineForm.resetFields();
              this.$message.success(res.message);
              this.gitList();
            } else {
              this.$message.error(res.message);
              this.gitList();
            }
          });
        } else {
          return false;
        }
      });
    },
    closeOfflineDia(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
          this.$refs.offlineForm.resetFields();
        })
        .catch(() => {
        });
    },
    // 导出
    orderExport() {
      let data = {};
      data.executeTime = this.executeTime;
      data.answerDay = this.query.answerDay;
      data.keyword = this.query.keyword;
      data.withHold = this.query.withHold;

      expotOut(
        "get",
        "/business/sign/exportMonthInfo",
        data, // 导出请求参数
        "月份分期详情表" // 导出文件名字
      );
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.gitList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.gitList();
    }
  }
};
</script>

<style scoped type="less">
.query {
  position: relative;
}

.button1Style {
  position: absolute;
  top: 0;
  right: 10px;
}

.button2Style {
  position: absolute;
  top: 0;
  right: 100px;
}

.button21Style {
  position: absolute;
  top: 0;
  right: 175px;
}

.content {
  font-size: 14px;
  margin: 20px 0;
  text-align: left;
}

::v-deep .el-pagination {
  position: absolute;
  right: 0;
  margin-top: 20px;
}

::v-deep .el-pagination__total {
  visibility: hidden;
}

.title {
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-weight: 400;
  line-height: 21px;
  position: absolute;
  left: 0;
  margin-top: 15px;
  color: rgba(51, 51, 51, 1);
}

.active {
  color: #fb575e;
}

.native {
  color: grey;
}
</style>
